import React, { Component } from 'react';
import qs from 'qs';
import { Card, Button, Form, Input } from 'antd';
import { getMessageDetail as getData } from 'Services/publicServer';
import { replyMsg } from 'Services/publicServer.js';

const FormItem = Form.Item;
const { TextArea } = Input;

@Form.create()
class messageDetail extends Component {
  constructor(props) {
    super(props);
    window.scope = this;
  }

  state = {
    data: {},
  };

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    const { id } = qs.parse(this.props.location.search.substr(1));
    const res = await getData({ id });
    this.setState({ data: res.data });
  };

  handleSubmit = e => {
    e.preventDefault();
    const { id } = qs.parse(this.props.location.search.substr(1));
    const { validateFieldsAndScroll } = this.props.form;
    validateFieldsAndScroll((err, values) => {
      if (err) return false;
      const data = values;
      data.id = id;
      replyMsg(data);
    });
  };

  render() {
    const { data } = this.state;
    const { getFieldDecorator } = this.props.form;

    return (
      <div>
        <Card title="留言详情">
          <div>
            <h1>{data.title}</h1>
            <h2>{data.createTime}</h2>
            <p>{data.content}</p>
          </div>
          <Form onSubmit={this.handleSubmit}>
            <FormItem label="回复该留言">
              {getFieldDecorator('content_re', {
                rules: [{ required: true, message: '请输入内容!' }],
              })(<TextArea rows="10" placeholder="请输入内容……" />)}
            </FormItem>
            <FormItem>
              <Button type="primary" htmlType="submit">
                回复
              </Button>
            </FormItem>
          </Form>
        </Card>
      </div>
    );
  }
}

export default messageDetail;
